//当前页
let currentPage = 1;
//每页显示条数
let pageSize = 3;
//总页数
let totalPage = 0;
//用户ID
let userId = 0;
//添加用户模态框
let addUserModal = `
<div class="modal fade" id="addUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="exampleModalLabel">添加用户</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="username" class="control-label">用户姓名:</label>
						<input type="text" class="form-control" id="username">
					</div>
					<div class="form-group">
						<label for="useremail" class="control-label">用户邮箱:</label>
						<input class="form-control" id="useremail"></input>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="save">保存</button>
			</div>
		</div>
	</div>
</div>`;
let deleteUserModal = `
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" id="delUserModal">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="exampleModalLabel">删除用户</h4>
			</div>
			<div class="modal-body">
				确认删除吗?
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="delok">确定</button>
			</div>
		</div>
	</div>
</div>`;
let editUserModal = `
<div class="modal fade" id="editUserModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
						aria-hidden="true">&times;</span></button>
				<h4 class="modal-title" id="exampleModalLabel">修改用户</h4>
			</div>
			<div class="modal-body">
				<form>
					<div class="form-group">
						<label for="eusername" class="control-label">用户姓名:</label>
						<input type="text" class="form-control" id="eusername" value="111">
					</div>
					<div class="form-group">
						<label for="euseremail" class="control-label">用户邮箱:</label>
						<input class="form-control" id="euseremail"></input>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary" id="editok">保存</button>
			</div>
		</div>
	</div>
</div>`;
//用户列表
function getUserList(currentPage, pageSize) {
	//开始
	let startRow = (currentPage - 1) * pageSize;
	//结束
	let endRow = currentPage * pageSize;
	let userList = localStorage.getItem("userlist");
	userList = $.parseJSON(userList);
	//总页数
	if (userList.length % pageSize != 0) {
		// totalPage = parseInt(userList.length / pageSize) + 1;
		totalPage = Math.ceil(userList.length / pageSize);
	} else {
		totalPage = parseInt(userList.length / pageSize);
	}

	//包括 begin，不包括end
	userList = userList.slice(startRow, endRow);
	let navigation = `
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li>
							<a href="#" aria-label="上一页" id="prev">
								<span aria-hidden="true">上一页</span>
							</a>
						</li>
						<li>
							<a href="#" aria-label="下一页" id="next">
								<span aria-hidden="true">下一页</span>
							</a>
						</li>
					</ul>
				</nav>`;
	let form = `
				<form class="form-inline">
					<div class="form-group">
						<input type="text" class="form-control" id="searchName" placeholder="输入搜索用户姓名...">
					</div>
					<div class="form-group">
						<button type="button" class="btn btn-primary glyphicon glyphicon-search"></button>
						<button type="button" class="btn btn-primary" data-toggle="modal"
							data-target="#addUserModal">添加用户</button>
					</div>
				</form>`;
	let table1 = `<div class="table-responsive"><table class="table">`;
	let trs = ``;
	userList.forEach(function(val) {
		let tr = `<tr>
					<td id="userid">${val.id}</td>
					<td>${val.name}</td>
					<td>${val.email}</td>
					<td><button type="button" class="btn btn btn-danger delete">删除</button>
						<button type="button" class="btn btn-info edit">修改</button>
					</td>
				</tr>`
		trs += tr;
	})
	let table2 = `</table></div>`;
	$('.main').empty();
	$('.main').append(form + table1 + trs + table2 + navigation);
	$('.main').append(addUserModal);
	$('.main').append(deleteUserModal);
	$('.main').append(editUserModal);
}
//保存用户
$(document).on('click','#save',function() {
	console.log("111111111111")
	const user = {
		id: Math.ceil((Math.random() * 10000)),
		name: $('#username').val(),
		email: $('#useremail').val()
	}
	let userList = localStorage.getItem("userlist");
	userList = $.parseJSON(userList);
	userList.push(user)
	localStorage.setItem("userlist", JSON.stringify(userList));
	$('#addUserModal').modal('hide');
	getUserList(currentPage, pageSize);
})
//删除模态框
$(this).on('click', '.delete', function() {
	userId = $(this).parent().siblings('#userid').html();
	$('#delUserModal').modal('show');
})
//删除
$('#delok').click(function() {
	let userList = localStorage.getItem("userlist");
	userList = $.parseJSON(userList);
	let r = userList.filter(function(val) {
		return val.id != userId
	})
	localStorage.setItem("userlist", JSON.stringify(r));
	$('#delUserModal').modal('hide');
	getUserList(currentPage, pageSize);
})
//修改模态框
$(this).on('click', '.edit', function() {
	let userList = localStorage.getItem("userlist");
	userList = $.parseJSON(userList);
	userId = $(this).parent().siblings('#userid').html();
	let user = userList.find(val => val.id == userId);
	$('#eusername').val(user.name);
	$('#euseremail').val(user.email);
	$('#editUserModal').modal('show');
})
//保存修改
$('#editok').click(function() {
	let userList = localStorage.getItem("userlist");
	userList = $.parseJSON(userList);
	userList.forEach(function(val) {
		if (val.id == userId) {
			val.name = $('#eusername').val();
			val.email = $('#euseremail').val();
		}
	})
	localStorage.setItem("userlist", JSON.stringify(userList));
	$('#editUserModal').modal('hide');
	getUserList(currentPage, pageSize);
})
// 搜索
$('.glyphicon-search').click(function() {
	let searchName = $('#searchName').val();
	if (searchName == null || searchName == "") {
		getUserList()
	} else {
		let userList = localStorage.getItem("userlist");
		userList = $.parseJSON(userList);
		let user = userList.find(val => val.name == searchName);

		let table1 = `<table class="table">`;
		let tr = `<tr>
							<td id="userid">${user.id}</td>
							<td>${user.name}</td>
							<td>${user.email}</td>
							<td><button type="button" class="btn btn btn-danger delete">删除</button>
								<button type="button" class="btn btn-info edit">修改</button>
							</td>
						</tr>`
		let table2 = `</table>`;
		$('.table-responsive').empty();
		$('.table-responsive').append(table1 + tr + table2);
	}
})
$('#next').click(function() {
	currentPage++;
	if (currentPage <= totalPage) {
		getUserList(currentPage, pageSize);
	} else {
		alert("已经是最后一页");
	}
})
$('#prev').click(function() {
	currentPage--;
	if (currentPage >= 1) {
		getUserList(currentPage, pageSize);
	} else {
		alert("已经是第一页");
	}
})
